<template>
  <div class="page">
    <header class="page__header">
      <div class="page-actions">
        <div style="border-right:1px solid #c5c5c5;cursor: pointer;" @click="exit">
          <i class="el-icon-arrow-left"></i>
        </div>
        <div>{{ title }}</div>
      </div>
      <div class="step-tab">
        <div v-for="(item, index) in steps" :key="index" class="step" :class="[activeStep == item.key ? 'active' : '']"
          @click="changeSteps(item)">
          <span class="step-index">{{ index + 1 }}</span>
          {{ item.label }}
        </div>
        <div class="ghost-step step" :style="{ transform: translateX }"></div>
      </div>
      <el-button size="small" class="publish-btn" @click="publish">发布</el-button>
    </header>
    <section class="page__content" v-if="mockData">
      <BasicSetting ref="basicSetting" :conf="mockData.basicSetting" v-show="activeStep === 'basicSetting'"
        tabName="basicSetting" @initiatorChange="onInitiatorChange" />

      <DynamicForm ref="formDesign" :conf="mockData.formData" v-show="activeStep === 'formDesign'" tabName="formDesign" />

      <Process ref="processDesign" :conf="mockData.processData" tabName="processDesign"
        v-show="activeStep === 'processDesign'" @startNodeChange="onStartChange" />

      <AdvancedSetting ref="advancedSetting" :conf="mockData.advancedSetting" v-show="activeStep === 'advancedSetting'" />

    </section>

  </div>
</template>

<script>
// @ is an alias to /src
import Process from "@/components/Process";
import DynamicForm from "@/components/DynamicForm";
import BasicSetting from '@/components/BasicSetting'
import AdvancedSetting from '@/components/AdvancedSetting'


export default {
  name: "ProcessDesignPage",
  props: {
    title: {
      type: String,
      default: '流程设计'
    }
  },
  data() {
    return {
      mockData: null, // 可选择诸如 $route.param，Ajax获取数据等方式自行注入
      activeStep: "basicSetting", // 激活的步骤面板
      steps: [
        { label: "基础设置", key: "basicSetting" },
        { label: "表单设计", key: "formDesign" },
        { label: "流程设计", key: "processDesign" },
        { label: "高级设置", key: "advancedSetting" }
      ]
    };
  },

  computed: {
    translateX() {
      return `translateX(${this.steps.findIndex(t => t.key === this.activeStep) * 100}%)`
    }
  },
  mounted() {
    this.mockData = {
      "basicSetting": {
        "flowName": "入职111",
        "flowImg": 12,
        "flowGroup": 2,
        "flowRemark": "简单入职背景填写"
      },
      "processData": {
        "type": "start",
        "content": "所有人",
        "properties": {
          "title": "发起人",
          "initiator": "ALL",
          "formOperates": [
            {
              "formId": 2,
              "formOperate": 2
            },
            {
              "formId": 3,
              "formOperate": 2
            },
            {
              "formId": 4,
              "formOperate": 2
            },
            {
              "formId": 5,
              "formOperate": 2
            },
            {
              "formId": 6,
              "formOperate": 2
            },
            {
              "formId": 7,
              "formOperate": 2
            },
            {
              "formId": 8,
              "formOperate": 2
            },
            {
              "formId": 9,
              "formOperate": 2
            }
          ]
        },
        "nodeId": "Gb2",
        "childNode": {
          "type": "approver",
          "content": "发起人自选",
          "properties": {
            "title": "审批人",
            "assigneeType": "optional",
            "formOperates": [
              {
                "formId": 2,
                "formOperate": 1
              },
              {
                "formId": 3,
                "formOperate": 1
              },
              {
                "formId": 4,
                "formOperate": 1
              },
              {
                "formId": 5,
                "formOperate": 1
              },
              {
                "formId": 6,
                "formOperate": 1
              },
              {
                "formId": 7,
                "formOperate": 1
              },
              {
                "formId": 8,
                "formOperate": 1
              },
              {
                "formId": 9,
                "formOperate": 1
              }
            ],
            "counterSign": true,
            "optionalMultiUser": false,
            "optionalRange": "ALL"
          },
          "nodeId": "Nb2",
          "prevId": "Gb2"
        },
        "conditionNodes": [
          {
            "type": "condition",
            "content": "[学历 = 博士生] \n",
            "properties": {
              "title": "条件1",
              "conditions": [
                {
                  "formId": 3,
                  "conditionValue": "博士生"
                }
              ],
              "initiator": null,
              "priority": 0,
              "isDefault": false
            },
            "nodeId": "Lb2",
            "prevId": "Gb2",
            "childNode": {
              "type": "approver",
              "content": "张三",
              "properties": {
                "title": "审批人",
                "approvers": [
                  {
                    "nodeId": 20,
                    "userId": 20,
                    "userName": "张三",
                    "deptId": 1
                  }
                ],
                "assigneeType": "user",
                "formOperates": [
                  {
                    "formId": 2,
                    "formOperate": 1
                  },
                  {
                    "formId": 3,
                    "formOperate": 1
                  },
                  {
                    "formId": 4,
                    "formOperate": 1
                  },
                  {
                    "formId": 5,
                    "formOperate": 1
                  },
                  {
                    "formId": 6,
                    "formOperate": 1
                  },
                  {
                    "formId": 7,
                    "formOperate": 1
                  },
                  {
                    "formId": 8,
                    "formOperate": 1
                  },
                  {
                    "formId": 9,
                    "formOperate": 1
                  }
                ],
                "counterSign": true,
                "optionalMultiUser": false,
                "optionalRange": "ALL"
              },
              "nodeId": "Wb2",
              "prevId": "Lb2",
              "childNode": {
                "type": "copy",
                "content": "xxx研发部",
                "properties": {
                  "title": "抄送人",
                  "menbers": {
                    "dep": [
                      {
                        "nodeId": 4,
                        "deptId": 4,
                        "deptName": "xxx研发部",
                        "parentDeptId": 1
                      }
                    ]
                  },
                  "userOptional": true
                },
                "nodeId": "Yb2",
                "prevId": "Wb2"
              }
            }
          },
          {
            "type": "condition",
            "content": "其他情况进入此流程",
            "properties": {
              "title": "条件2",
              "conditions": [],
              "initiator": null,
              "priority": 1,
              "isDefault": true
            },
            "nodeId": "Mb2",
            "prevId": "Gb2",
            "childNode": {
              "type": "approver",
              "content": "王五",
              "properties": {
                "title": "审批人",
                "approvers": [
                  {
                    "nodeId": 40,
                    "userId": 40,
                    "userName": "王五",
                    "deptId": 1
                  }
                ],
                "assigneeType": "user",
                "formOperates": [
                  {
                    "formId": 2,
                    "formOperate": 1
                  },
                  {
                    "formId": 3,
                    "formOperate": 1
                  },
                  {
                    "formId": 4,
                    "formOperate": 1
                  },
                  {
                    "formId": 5,
                    "formOperate": 1
                  },
                  {
                    "formId": 6,
                    "formOperate": 1
                  },
                  {
                    "formId": 7,
                    "formOperate": 1
                  },
                  {
                    "formId": 8,
                    "formOperate": 1
                  },
                  {
                    "formId": 9,
                    "formOperate": 1
                  }
                ],
                "counterSign": true,
                "optionalMultiUser": false,
                "optionalRange": "ALL"
              },
              "nodeId": "Xb2",
              "prevId": "Mb2"
            }
          }
        ]
      },
      "formData": {
        "fields": [
          {
            "cmpType": "common",
            "label": "组织机构",
            "tag": "fc-org-select",
            "tagIcon": "dept",
            "defaultValue": {
              "dep": [
                {
                  "nodeId": 1,
                  "deptId": 1,
                  "deptName": "xxxs公司"
                }
              ]
            },
            "tabList": [
              "dep"
            ],
            "buttonType": "button",
            "title": "组织机构",
            "searchable": true,
            "maxNum": 1,
            "tagConfig": {
              "type": "info",
              "closable": true,
              "disable-transitions": false,
              "hit": false,
              "size": "small",
              "effect": "light"
            },
            "style": {
              "width": "100%"
            },
            "span": 24,
            "labelWidth": null,
            "disabled": false,
            "required": true,
            "regList": [],
            "changeTag": true,
            "proCondition": true,
            "asSummary": false,
            "layout": "colFormItem",
            "formId": 20,
            "renderKey": 1590641662215,
            "vModel": "field20"
          },
          {
            "cmpType": "common",
            "label": "姓名",
            "tag": "el-input",
            "tagIcon": "input",
            "placeholder": "请输入姓名",
            "span": 12,
            "labelWidth": 0,
            "style": {
              "width": "100%"
            },
            "clearable": true,
            "prepend": "",
            "append": "",
            "prefix-icon": "",
            "suffix-icon": "",
            "maxlength": null,
            "show-word-limit": false,
            "readonly": false,
            "disabled": false,
            "required": false,
            "regList": [],
            "changeTag": true,
            "proCondition": false,
            "asSummary": false,
            "formId": 2,
            "renderKey": 1590647662215,
            "layout": "colFormItem",
            "vModel": "field2"
          },
          {
            "cmpType": "common",
            "label": "学历",
            "tag": "el-select",
            "tagIcon": "select",
            "placeholder": "请选择学历",
            "span": 12,
            "labelWidth": 0,
            "style": {
              "width": "100%"
            },
            "clearable": true,
            "disabled": false,
            "required": true,
            "filterable": false,
            "multiple": false,
            "options": [
              {
                "label": "专科",
                "value": "专科"
              },
              {
                "label": "本科",
                "value": "本科"
              },
              {
                "label": "研究生",
                "value": "研究生"
              },
              {
                "label": "博士生",
                "value": "博士生"
              }
            ],
            "regList": [],
            "changeTag": true,
            "proCondition": true,
            "formId": 3,
            "renderKey": 1590647681649,
            "layout": "colFormItem",
            "vModel": "field3"
          },
          {
            "cmpType": "common",
            "label": "性别",
            "tag": "el-radio-group",
            "tagIcon": "radio",
            "span": 12,
            "labelWidth": 0,
            "style": {},
            "optionType": "default",
            "border": false,
            "size": "medium",
            "disabled": false,
            "required": false,
            "options": [
              {
                "label": "男",
                "value": "男"
              },
              {
                "label": "女",
                "value": "女"
              }
            ],
            "regList": [],
            "changeTag": true,
            "proCondition": true,
            "formId": 4,
            "renderKey": 1590647690138,
            "layout": "colFormItem",
            "vModel": "field4",
            "defaultValue": "男"
          },
          {
            "cmpType": "common",
            "layout": "rowFormItem",
            "rowType": "table",
            "tagIcon": "row",
            "tag": "fc-input-table",
            "type": "table",
            "justify": "start",
            "align": "top",
            "label": "工作经历",
            "layoutTree": false,
            "children": [
              {
                "cmpType": "common",
                "label": "日期范围",
                "tag": "fc-date-duration",
                "showDuration": false,
                "tagIcon": "date-range",
                "defaultValue": null,
                "span": 24,
                "labelWidth": 0,
                "style": {
                  "width": "100%"
                },
                "type": "daterange",
                "range-separator": "至",
                "start-placeholder": "开始日期",
                "end-placeholder": "结束日期",
                "disabled": false,
                "clearable": true,
                "required": false,
                "format": "yyyy-MM-dd",
                "value-format": "yyyy-MM-dd",
                "readonly": false,
                "regList": [],
                "changeTag": true,
                "proCondition": true,
                "asSummary": false,
                "formId": 6,
                "renderKey": 1590647800330,
                "layout": "colFormItem",
                "vModel": "field6"
              },
              {
                "cmpType": "common",
                "label": "公司名称",
                "tag": "el-input",
                "tagIcon": "input",
                "placeholder": "请输入公司名称",
                "span": 24,
                "labelWidth": 0,
                "style": {
                  "width": "100%"
                },
                "clearable": true,
                "prepend": "",
                "append": "",
                "prefix-icon": "",
                "suffix-icon": "",
                "maxlength": null,
                "show-word-limit": false,
                "readonly": false,
                "disabled": false,
                "required": true,
                "regList": [],
                "changeTag": true,
                "proCondition": false,
                "asSummary": false,
                "formId": 7,
                "renderKey": 1590647831276,
                "layout": "colFormItem",
                "vModel": "field7"
              },
              {
                "cmpType": "common",
                "label": "岗位",
                "tag": "el-select",
                "tagIcon": "select",
                "placeholder": "请选择岗位",
                "span": 24,
                "labelWidth": 0,
                "style": {
                  "width": "100%"
                },
                "clearable": true,
                "disabled": false,
                "required": false,
                "filterable": false,
                "multiple": false,
                "options": [
                  {
                    "label": "前端",
                    "value": "前端"
                  },
                  {
                    "label": "后端",
                    "value": "后端"
                  },
                  {
                    "label": "其他",
                    "value": "其他"
                  }
                ],
                "regList": [],
                "changeTag": true,
                "proCondition": true,
                "formId": 8,
                "renderKey": 1590647845533,
                "layout": "colFormItem",
                "vModel": "field8"
              },
              {
                "cmpType": "common",
                "label": "附件",
                "tag": "el-upload",
                "tagIcon": "upload",
                "action": "https://jsonplaceholder.typicode.com/posts/",
                "defaultValue": [],
                "labelWidth": 0,
                "disabled": false,
                "required": false,
                "accept": "",
                "name": "file",
                "auto-upload": true,
                "showTip": false,
                "buttonText": "点击上传附件",
                "fileSize": 20,
                "sizeUnit": "MB",
                "list-type": "text",
                "multiple": false,
                "regList": [],
                "changeTag": true,
                "proCondition": false,
                "asSummary": false,
                "formId": 9,
                "span": 24,
                "renderKey": 1590647866199,
                "layout": "colFormItem",
                "vModel": "field9"
              }
            ],
            "actionText": "添加",
            "tableConf": {},
            "showDivider": false,
            "show-summary": false,
            "formId": 5,
            "span": 24,
            "renderKey": 1590647776442,
            "vModel": "field5",
            "componentName": "row5",
            "gutter": 15
          }
        ],
        "formRef": "elForm",
        "size": "small",
        "labelPosition": "right",
        "labelWidth": 100,
        "gutter": 15,
        "disabled": false,
        "span": 12,
        "formBtns": true
      },
      "advancedSetting": {
        "autoRepeat": true,
        "myAuditAutoPass": true,
        "remarkTip": "这里是填写提示",
        "remarkRequired": true,
        "notVisibleForSponsor": true
      }
    }
  },
  methods: {
    changeSteps(item) {
      this.activeStep = item.key;
    },
    publish() {
      const getCmpData = name => this.$refs[name].getData()
      // basicSetting  formDesign processDesign 返回的是Promise 因为要做校验
      // advancedSetting返回的就是值
      const p1 = getCmpData('basicSetting')
      const p2 = getCmpData('formDesign')
      const p3 = getCmpData('processDesign')
      Promise.all([p1, p2, p3])
        .then(res => {
          const param = {
            basicSetting: res[0].formData,
            processData: res[2].formData,
            formData: res[1].formData,
            advancedSetting: getCmpData('advancedSetting')
          }
          this.sendToServer(param)
        })
        .catch(err => {
          err.target && (this.activeStep = err.target)
          err.msg && this.$message.warning(err.msg)
        })
    },
    sendToServer(param) {
      this.$notify({
        title: '数据已整合完成',
        message: '请在控制台中查看数据输出',
        position: 'bottom-right'
      });
      console.log('配置数据', param)
    },
    exit() {
      this.$confirm('离开此页面您得修改将会丢失, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '模拟返回!'
        });
      }).catch(() => { });
    },
    /**
     * 同步基础设置发起人和流程节点发起人
     */
    onInitiatorChange(val, labels) {
      const processCmp = this.$refs.processDesign
      const startNode = processCmp.data
      startNode.properties.initiator = val['dep&user']
      startNode.content = labels || '所有人'
      processCmp.forceUpdate()
    },
    /**
     * 监听 流程节点发起人改变 并同步到基础设置 发起人数据
     */
    onStartChange(node) {
      const basicSetting = this.$refs.basicSetting
      basicSetting.formData.initiator = { 'dep&user': node.properties.initiator }
    }
  },
  components: {
    Process,
    DynamicForm,
    BasicSetting,
    AdvancedSetting
  }
};
</script>
<style lang="stylus" scoped>
$header-height = 54px;
.page {
  width: 100%;
  height: 100vh;
  box-sizing: border-box;

  .page__header {
    width: 100%;
    height: $header-height;
    flex-center()
    justify-content: space-between;
    box-sizing: border-box;
    color: white;
    background: #3296fa;
    font-size: 14px;
    

    .page-actions {
      height: 100%;
      text-align: center;
      line-height: $header-height;

      > div {
        height: 100%;
        padding-left: 20px;
        padding-right: 20px;
        display: inline-block;
      }

      i {
        font-size: 22px;
        vertical-align: middle;
      }
    }

    .step-tab {
      display: flex;
      justify-content: center;
      height: 100%;
      position: relative;

      >.step {
        width: 140px;
        line-height: $header-height;
        padding-left: 30px;
        padding-right: 30px;
        cursor: pointer;
        position: relative;

        &.ghost-step{
          position: absolute;
          height: $header-height;
          left: 0;
          z-index: -1;
          background: #4483f2;
          transition: transform .5s;

          &::after {
            content: '';
            border-width: 6px 6px 6px;
            border-style: solid;
            border-color: transparent transparent white;
            position: absolute;
            bottom: 0;
            left: 50%;
            margin-left: -6px;
          }
        }

        &.active >.step-index  {
          background: white;
          color: #4483f2;
        }

        >.step-index {
          display: inline-block;
          width: 18px;
          height: 18px;
          border: 1px solid #fff;
          border-radius: 8px;
          line-height: 18px;
          text-align: center;
          box-sizing: border-box;
        }
      }
    }
  }

  .page__content {
    width: 100%;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
    background #f5f5f7
  }
}

.publish-btn {
  margin-right: 20px;
  color: #3296fa;
  padding: 7px 20px;
  border-radius: 4px;
  font-size: 14px;
}


</style>
